Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).
Кроме того, не нужны все эти ссылки на значки и размеры, которые ты копируешь из проекта в проект. Давайте узнаем, какой абсолютный минимум для этого требуется.
Иконка
Главная фивиконка может быть SVG любого размера. Тип type="image/svg+xml"
не нужен.
<link rel="icon" href="favicon.svg">
Маска-иконка
Для Safari, это слегка иначе. Тебе нужно добавить mask-icon
. Это также SVG, но он должен быть одного цвета и расположен на прозрачном фоне. В браузере есть атрибут цвета.
<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">
Касательная фавиконка (Touch Icon)
Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180
, и атрибут sizes лишний.
Манифест
Файл manifest.json
предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.
Значок